<template>
    <ContentWrap>
        <CardTitle title="InputPassword 使用" />
        <code class="code-block mt-20px" >
            &lt;InputPassword v-model="password" placeholder="请输入密码" /&gt;<br/>
            &lt;InputPassword v-model="password" :strength="true" placeholder="带强度校验" /&gt;<br/>
            &lt;InputPassword v-model="password" :show-password="false" placeholder="不显示密码切换" /&gt;
        </code>
        <CardTitle title="InputPassword 代码示例" />
        <pre class="code-block">
            <code>
&lt;script setup lang="ts"&gt;
import { ref } from 'vue'

const password = ref('')
const confirmPassword = ref('')

&lt;/script&gt;
            </code>
        </pre>
        <CardTitle title="InputPassword 属性" />
        <table class="properties-table mt-20px">
            <thead>
                <tr>
                    <th>属性</th>
                    <th>类型</th>
                    <th>默认值</th> 
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>modelValue</td> 
                    <td>String</td>
                    <td>-</td>
                    <td>密码值</td>
                </tr>
                <tr>
                    <td>placeholder</td>
                    <td>String</td>
                    <td>请输入密码</td>
                    <td>占位符文本</td>
                </tr>
                <tr>
                    <td>strength</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>是否显示密码强度</td>
                </tr>
                <tr>
                    <td>showPassword</td>
                    <td>Boolean</td>
                    <td>true</td>
                    <td>是否显示密码切换按钮</td>
                </tr>
            </tbody>
        </table>
        <CardTitle title="InputPassword 示例" />
       <div class="mt-20px">
            <div class="demo-section">
                <h4>基础用法</h4>
                <InputPassword v-model="password1" placeholder="请输入密码" />
                <p class="demo-result">当前值: {{ password1 }}</p>
            </div>
            
            <div class="demo-section">
                <h4>密码强度校验</h4>
                <InputPassword v-model="password2" :strength="true" placeholder="带强度校验的密码输入" />
                <p class="demo-result">当前值: {{ password2 }}</p>
            </div>
            
         
       </div>
    </ContentWrap>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const password1 = ref('')
const password2 = ref('')
</script>

<style lang="scss" scoped>
.demo-section {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fafafa;
    
    h4 {
        margin: 0 0 15px 0;
        color: #333;
        font-size: 16px;
    }
    
    .demo-result {
        margin: 10px 0 0 0;
        color: #666;
        font-size: 14px;
        font-family: monospace;
        
        &.error {
            color: #f56c6c;
        }
    }
}

.password-confirm-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
</style> 